<template>
  <div style="display: flex;align-items: center;justify-content: center;">
    <div id="container" style="height: 500px; width: 500px"></div>
    <!-- <div id="blog" style="height: 500px; width: 500px"></div> -->
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, ref } from "vue";
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

const { proxy } = getCurrentInstance();

const api = {
  loadBlogList: "/view/getCategory",
  loadTeamUser: "/view/loadTeamUser",
};

//获取用户详情
let userData = [];
const userDetail = async () => {
  let result = await proxy.Request({
    url: api.loadTeamUser,
    params: {},
  });
  if (!result) {
    return;
  }
  userData = countArticlesByCategory(result.data);
  showUserEcharts(userData,"container");
};
userDetail();
// 博客想请
let blogData = [];
const blogDetail = async () => {
  let result = await proxy.Request({
    url: api.loadBlogList,
    params: {},
  });
  if (!result) {
    return;
  }
  blogData = countArticlesByCategory2(result.data);
  showUserEcharts(blogData,"blog");
};
userDetail();

function countArticlesByCategory(data) {
  const categoryCount = {};

  // 遍历博客列表
  data.forEach((article) => {
    const nickName = article.nickName;
    categoryCount[nickName] = 0;
    categoryCount[nickName] += article.blogCount;
  });

  // 转换为ECharts饼图数据格式
  const chartData = Object.keys(categoryCount).map((nickName) => {
    return { value: categoryCount[nickName], name: nickName };
  });

  return chartData;
}
function countArticlesByCategory2(data) {
  const categoryCount = {};

  // 遍历博客列表
  data.forEach((article) => {
    const nickName = article.nickName;
    categoryCount[nickName] = 0;
    categoryCount[nickName] += article.blogCount;
  });

  // 转换为ECharts饼图数据格式
  const chartData = Object.keys(categoryCount).map((nickName) => {
    return { value: categoryCount[nickName], name: nickName };
  });

  return chartData;
}

const showUserEcharts = (data,id) => {
  nextTick(() => {
    console.log("data", data);
    var chartData = data;

    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          // data: [
          //   { value: 1048, name: 'Search Engine' },
          //   { value: 735, name: 'Direct' },
          //   { value: 580, name: 'Email' },
          //   { value: 484, name: 'Union Ads' },
          //   { value: 300, name: 'Video Ads' }
          // ]
          data: chartData,
        },
      ],
    };

    myChart.setOption(option);
  });
};
</script>

<style scoped lang="scss">
</style>